<template>
  <div>属性监听</div>
  <fieldset>
    <legend>个人名称</legend>
    姓:<input type="text" placeholder="请输入姓名" v-model="user.firstname" />
    名称:<input type="text" placeholder="请输入姓名" v-model="user.lastname" />
  </fieldset>
  <fieldset>
    <legend>属性监听</legend>
    姓名:<input type="text" placeholder="姓名" v-model="fullname1" /><br />
    姓名:<input type="text" placeholder="姓名" v-model="fullname2" />
    姓名:<input type="text" placeholder="姓名" v-model="fullname3" />
  </fieldset>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  reactive,
  watch,
  ref,
  watchEffect,
} from "vue";
export default defineComponent({
  name: "App",
  setup() {
    const user = reactive({
      firstname: "东方",
      lastname: "不败",
    });
    // 计算函数
    // 计算函数中的如果只传入第一个回调函数，表示的是get

    // 返回的是一个Ref类型对象
    const fullname1 = computed(() => {
      return user.firstname + "__" + user.lastname;
    });

    // 如果需要set,get则传入一个对象
    const fullname2 = computed({
      get() {
        return user.firstname + "__" + user.lastname;
      },
      set(val: string) {
        const sss = val.split("__");
        console.log("===" + val);
        user.firstname = sss[0];
        user.lastname = sss[1];
      },
    });

    // 监视----watch
    const fullname3 = ref("");
    // watch(
    //   user,
    //   (newVal) => {
    //     fullname3.value = newVal.firstname + "__" + newVal.lastname;
    //   },
    //   { deep: true, immediate: true }
    // );
    // immediate 默认会执行一次，deep深度监视

    // 监视，不需要immediate，本身默认就会进行监视
    // watchEffect(() => {
    //   fullname3.value = user.firstname + "__" + user.lastname;
    // });

    // 监视fullname3的数据，改变firstname和lastname
    // watchEffect(() => {
    //   const names = fullname3.value.split("__");
    //   user.firstname = names[0];
    //   user.lastname = names[1];
    // });

    // watch--可以监听多个数据的
    // watch([user.firstname, user.lastname], () => {
    //   // 这里的代码就没有执行，fullname3是响应式的数据，但是user.firstname,user.lastname不是响应式的数据
    //   console.log("====");
    // });

    // 当我们使用watch监视非响应式的数据的时候，代码需要改一下
    // watch([() => user.firstname, () => user.lastname], () => {
    //   console.log("====");
    // });

    return {
      user,
      fullname1,
      fullname2,
      fullname3,
    };
  },
  /* vue2实现方式
   computed: {
    simpleName: {
      get: function () {},
      set: function (neeValue) {},
    },
  },
   watch:{
     a(val, oldVal){//普通的watch监听
         console.log("a: "+val, oldVal);
     },
     b:{//深度监听，可监听到对象、数组的变化
         handler(val, oldVal){
             console.log("b.c: "+val.c, oldVal.c);
         },
         deep:true //true 深度监听
     }
 }*/
});
</script>

<style>
</style>
